<template>
    <!-- <el-button style="background-color: #b3e19d;" :icon="Fold" size="small" @click="isCollapse = !isCollapse" /> -->
    <el-menu active-text-color="rgb(0,147,66)" background-color="#fff" default-active="2" text-color="#000000"
        @open="handleOpen" @close="handleClose" router :collapse="isCollapse">
        <el-menu-item index="/front/myActivity/MyActivityView">
            <template #title>
                <el-icon>
                    <GoldMedal />
                </el-icon>
                <span style="font-size: 16px; font-weight: bold;">活动记录</span>
            </template>
        </el-menu-item>
        <el-menu-item index="/front/myService/MyServiceView">
            <template #title>
                <el-icon>
                    <GoldMedal />
                </el-icon>
                <span style="font-size: 16px; font-weight: bold;">服务订单</span>
            </template>
        </el-menu-item>
        <el-menu-item index="/front/myReport/MyReportView">
            <template #title>
                <el-icon>
                    <GoldMedal />
                </el-icon>
                <span style="font-size: 16px; font-weight: bold;">体检报告</span>
            </template>
        </el-menu-item>
        <!-- <el-menu-item index="3">
            <template #title>
                <el-icon>
                    <Brush />
                </el-icon>
                <span style="font-size: 16px; font-weight: bold;">我的积分</span>
            </template>
        </el-menu-item> -->
    </el-menu>
    <div style="display: flex; align-content: center;">
        <!-- 拖拽vue.draggable网址：https://www.itxst.com/vue-draggable-next/tutorial.html -->

        <!-- <draggable :list="arr" delay="500" animation="200" @start="onStart" @end="onEnd">
            <template #item="{ element }">
                <div class="item">
                    <el-button>
                        <el-icon>
                            <HomeFilled />
                        </el-icon>
                    {{ element.name }}
                    </el-button>
                </div>
            </template>
        </draggable> -->

        <!-- <draggable v-model="buttons"> -->
        <!-- <template v-for="button in buttons"> -->
        <!-- <div :key="button.id" v-draggable-item> -->
        <!-- <el-button @click="handleClick()" circle size="large" style="margin-top: 400px;margin-left: 100px;">
            <el-icon>
                <HomeFilled />
            </el-icon>
        </el-button> -->
        <!-- </div> -->
        <!-- </template> -->
        <!-- </draggable> -->
    </div>
</template>

<script setup>
import { ref } from 'vue';
// import { useRouter } from 'vue-router'
import { GoldMedal, Brush, Bicycle, Bowl, Operation } from '@element-plus/icons-vue'
// import { draggable, draggableItem } from "vuedraggable";

const isCollapse = ref(false);
const roleId = sessionStorage.getItem('roleId')
// console.log(roleId);

// const buttons = ref([
//     { id: 1, text: '拖拽按钮', route: 'about' },
//     // 可以添加更多的按钮对象
// ]);

// const router = useRouter()
// function handleClick() {
//     router.push('/About'); // 跳转到指定路由
// }

// const arr = ref({
//     list: [
//         {
//             name: "a",
//             id: 1
//         }, {
//             name: "b",
//             id: 2
//         }
//     ]
// })

// const onStart = () => {
//     console.log("onStart");
// }

// const onEnd = () => {
//     console.log("onEnd");
//     // this.drag = true;
// }


const handleOpen = (key, keyPath) => {
    console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
    console.log(key, keyPath)
}
</script>

<style lang="scss" scoped>
.el-button {
    width: 100%;
}

.el-menu {
    margin-top: 50%;
    border-right: 0px solid;
}

[v-draggable-item] {
    display: contents;
}
</style>